<template>
  <!--  <div class="tags-header">-->
  <div class="app-header">
    <el-tabs
      class="my-tabs"
      v-model="activeName"
      @tab-click="handleClick"
      @tab-remove="handleClose"
    >
      <el-tab-pane label="首页" name="/home"></el-tab-pane>
      <el-tab-pane
        v-for="item in openTab"
        closable
        :key="item.name"
        :label="item.name"
        :name="item.route"
      ></el-tab-pane>
    </el-tabs>
  </div>
  <!--  </div>-->
</template>
<script>
export default {
  data() {
    return {
      activeName: this.$route.path,
    };
  },
  watch: {
    $route(to) {
      let flag = false;
      for (let item of this.openTab) {
        if (item.name === to.name) {
          this.$store.commit("tags/set_active_index", to.path);
          this.activeName = to.path;
          flag = true;
          break;
        }
      }
      if (!flag) {
        this.$store.commit("tags/add_tabs", { route: to.path, name: to.name });
        this.$store.commit("tags/set_active_index", to.path);
        this.activeName = to.path;
      }
    },
  },
  methods: {
    handleClick(tab) {
      if (tab.name == this.activeIndex) {
        return;
      }
      if (tab.name === "/home") {
        this.$router.push("/home");
      } else {
        this.$router.push(tab.name);
      }
    },
    handleClose(tag) {
      this.$store.commit("tags/delete_tabs", tag);
      if (this.activeIndex === tag) {
        // 设置当前激活的路由
        if (this.openTab && this.openTab.length > 0) {
          this.$store.commit(
            "tags/set_active_index",
            this.openTab[this.openTab.length - 1].route
          );
          this.$router.push({ path: this.activeIndex });
          this.activeName = this.activeIndex;
        } else {
          this.activeIndex = "/home";
          this.$router.push("/home");
        }
      }
    },
  },
  computed: {
    openTab() {
      return this.$store.state.tags.openTab;
    },
    activeIndex: {
      get() {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.$router.push(this.$store.state.tags.activeIndex);
        return this.$store.state.tags.activeIndex;
      },
      set(val) {
        this.$store.commit("tags/set_active_index", val);
      },
    },
  },
};
</script>
<style lang="scss" scoped>
//.tags-header {
//  //position: fixed;
//  // left: 0;
//  width: 100%;
//  //height: 60px;
//  z-index: 1300;
//  background-color: #f0f2f5;
//
//
//}
.app-header {
  display: flex;
  align-items: center;
  padding-left: 12px;
  height: 40px;
  background-color: #fff;
  position: fixed;
  top: 62px;
  width: 100%;
  max-width: 2560px;
  z-index: 1000;

  ::v-deep .el-tabs__nav-wrap::after {
    background-color: #fff !important;
  }

  ::v-deep .el-tabs__header {
    margin: 0;
  }

  ::v-deep .el-tabs__item.is-top:nth-child(2) {
    padding-left: 16px;
  }

  ::v-deep .el-tabs__item.is-top:last-child {
    padding-right: 16px;
  }

  ::v-deep .el-tabs__item {
    box-sizing: border-box;
    margin: 0 3px;
    padding: 0 16px;
    color: #bbb;
    overflow: hidden;
    max-font-size: 5px;

    &:hover .el-icon-close:before {
      left: 0px;
    }

    .is-active {
      color: #bbb;
    }
  }

  ::v-deep .el-tabs__item.is-active {
    border-bottom: 2px solid #2e82ff;
    color: #2e82ff;

    .el-icon-close:before {
      left: 0;
    }
  }

  ::v-deep .el-tabs__active-bar.is-top {
    box-sizing: border-box !important;
    background-clip: content-box !important;
  }

  /*去掉切换时el-tab-pane底部的蓝色下划线*/
  ::v-deep .el-tabs__active-bar {
    background-color: transparent !important;
    display: none;
  }

  /*去掉tabs底部的下划线*/
  ::v-deep .el-tabs__nav-wrap::after {
    position: static !important;
    display: none;
  }

  ::v-deep .el-icon-close:before {
    position: relative;
    left: 28px;
    top: 0;
    transition: left 0.4s ease-out;
  }
}
</style>
